<script setup>
import { ref, watchEffect } from 'vue'
import Dialog from './Dialog.vue'

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false,
    },
    title: {
        type: String,
        default: '',
    },
})
const emit = defineEmits(['update:modelValue', 'confirm'])

const dialogRef = ref(null)

watchEffect(() => {
    if (props.modelValue) {
        dialogRef.value?.open()
    } else {
        dialogRef.value?.close()
    }
})

function handleMaskClick() {
    emit('update:modelValue', false)
}
</script>

<template>
    <Dialog ref="dialogRef" type="center" @mask-click="handleMaskClick">
        <view>{{ title }}</view>
        <view class="flex justify-end gap-4 py-2">
            <view @click="emit('update:modelValue', false)">取消</view>
            <view @click="emit('confirm')">确定</view>
        </view>
    </Dialog>
</template>
